<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>摇一摇管理端</title>
  <link rel="stylesheet" href="./css/common.css">
  <style>
  .alert{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0;
    left: 0;
  }
  input,button{
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  #time{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgb(211, 59, 59);
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
    border-radius: 50%;
  }
  #erwenma{
    margin: 0 auto;
    text-align: center;
  }
  .begin_btn{
    width: 100px;
    display: block;
    margin: 0 auto;
  }
  </style>
</head>
<body>

  <div class="alert" id="loginalert" style="display: none">
    <input type="password" id="code" placeholder="验证密码" />
    <button onclick="page.login()">登录</button>
  </div>

  <div>
    <input type="text" id="name" placeholder="活动名称" />
    <button onclick="page.addHuodong()">添加活动</button>
    <button onclick="page.deAllHuodong()">删除所有活动并清空错误缓存</button>
    <table border="1">
      <thead>
        <tr>
          <th>h_id</th>
          <th>活动名称</th>
          <th>是否开始</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="huodongs">
      </tbody>
    </table>
  </div>

  <div class="alert" id="gamealert" style="display: none">
    <div id="erwenma"></div>
    <button class="begin_btn" onclick="page.isbeginHuodong(true)">开始游戏</button>
    <button class="begin_btn" style="display: none" onclick="location.reload()">重新开始</button>
    <div id="time"></div>
    <div style="border: 1px solid #ccc" id="paiming"></div>
    <div style="border: 1px solid #ccc" id="data"></div>
  </div>

  
  <script src="./js/jquery.js"></script>
  <script src="./js/md5.js"></script>
  <script src="./js/init.js"></script>
  <script>
    var page = {
      code:document.getElementById('code'),
      loginalert:document.getElementById('loginalert'),
      erwenma:document.getElementById('erwenma'),
      data:document.getElementById('data'),
      name:document.getElementById('name'),
      huodongs:document.getElementById('huodongs'),
      gamealert:document.getElementById('gamealert'),
      time:document.getElementById('time'),
      paiming:document.getElementById('paiming'),
      begin_btns:document.getElementsByClassName('begin_btn'),
      now_h_id:null,
      init:function(){
        this.checkLogin();
      },
      checkLogin:function(){
        utils.ajax({
          url:API.checkLogin,
          data:{},
          success:function(data){
            if (data.status!=1) {
              page.loginalert.style.display = 'block';
            }else{
              page.getAllHuodong();
            }
          }
        })
      },
      addHuodong:function(){
        utils.ajax({
          url:API.addHuodong,
          data:{name:this.name.value},
          success:function(data){
            if (data.status==1) {
              alert("添加成功");
              page.getAllHuodong();
            } else {
              alert(data.message);
            }
          }
        })
      },
      login:function(){
        utils.ajax({
          url:API.login,
          data:{code:hex_md5(hex_md5(this.code.value))},
          success:function(data){
            if (data.status==1) {
                window.location.reload();
            } else {
              alert(data.message);
            }
          }
        })
      },
      getAllHuodong:function(){
        utils.ajax({
          url:API.getAllHuodong,
          data:{},
          success:function(data){
            if (data.status==1) {
              var list = data.data;
              var html = '';
              if (!list) {
                page.huodongs.innerHTML = html;
                return;
              }
              list.forEach(function(item){
                html+=/*html*/`
                <tr>
                  <th>${item.h_id}</th>
                  <th>${item.name}</th>
                  <th>${item.isbegin}</th>
                  <th>
                    <button onclick="page.beginGame('${item.h_id}')">开始活动并生成二维码</button>
                    <button onclick="page.deHuodong('${item.h_id}')">删除活动</button>
                  </th>
                </tr>`;
              });
              page.huodongs.innerHTML = html;
            } else {
              alert(data.message);
            }
          }
        })
      },
      deAllHuodong:function(){
        utils.ajax({
          url:API.deAllHuodong,
          data:{},
          success:function(data){
            if (data.status==1) {
              page.getAllHuodong();
            } else {
              alert(data.message);
            }
          }
        })
      },
      beginGame:function(h_id){
        page.now_h_id = h_id;
        page.topscan(h_id);
        page.gamealert.style.display='block';
      },
      isbeginHuodong:function(isbegin){
        utils.ajax({
          url:API.isbeginHuodong,
          data:{h_id:page.now_h_id,isbegin:isbegin},
          success:function(data){
            if (data.status==1) {
              if (isbegin) {
                page.setIntervalGetData();
                page.daojishi();
                page.erwenma.style.display='none';
                page.begin_btns[0].style.display='none';
                page.begin_btns[1].style.display='block';
              }
            } else {
              alert(data.message);
            }
          }
        })
      },
      deHuodong:function(h_id){
        utils.ajax({
          url:API.deHuodong,
          data:{h_id:h_id},
          success:function(data){
            if (data.status==1) {
              page.getAllHuodong();
            } else {
              alert(data.message);
            }
          }
        })
      },
      getHuodong:function(h_id){
        utils.ajax({
          url:API.getHuodong,
          data:{h_id:h_id},
          success:function(data){
            if (data.status==1) {
              var list = data.data.pensons;
              var html = '';
              list.forEach(function(item){
                html+=/*html*/`
                  <div>${item.name}</div>
                  <div style="height:20px;width:${item.count*4}px;background:rgb(211,59,59);"></div>`;
              });
              page.data.innerHTML = html;
            } else {
              alert(data.message);
            }
          }
        })
      },
      paiminggetHuodong:function(h_id){
        utils.ajax({
          url:API.getHuodong,
          data:{h_id:h_id},
          success:function(data){
            if (data.status==1) {
              var list = data.data.pensons;
              list.sort(function(a,b){
                return a.count-b.count;
              })
              var html = '';
              list.forEach(function(item){
                html+=/*html*/`
                  <div>
                    <span>昵称：${item.name}</span>
                    <span>次数：${item.count}</span>
                  </div>`;
              });
              page.paiming.innerHTML = html;
            } else {
              alert(data.message);
            }
          }
        })
      },
      timer:null,
      setIntervalGetData:function(){
        this.timer = setInterval(function(){
          page.getHuodong(page.now_h_id);
        },400)
      },
      timer2:null,
      s_time:60,
      daojishi:function(){
        this.timer2 = setInterval(function(){
          page.s_time--;
          if (page.s_time<=0) {
            window.clearInterval(page.timer);
            window.clearInterval(page.timer2);
            page.isbeginHuodong(false);
            page.paiminggetHuodong(page.now_h_id);
          }
          page.time.innerHTML = page.s_time;
        },1000)
      },
      topscan:function(h_id){
        var img = `${window.location.origin}/yaoyiyao/web/index.html?h_id=${h_id}`;
        this.erwenma.innerHTML = /*html*/`<img src='http://qr.topscan.com/api.php?text=${img}'>`;
      },
    }
    window.onload = function(){
      page.init();
    }
  </script>
</body>
</html>